<template>
  <el-drawer
    :title="title"
    :visible.sync="drawer"
    size="42%"
    :direction="direction"
    :before-close="handleClose"
    custom-class="demo-drawer"
    class="drawer"
  >
    <div class="content">
      <el-form :model="addForm" class="addform" ref="addForm" :rules="rules">
        <el-form-item
          label="阶梯价格名称："
          :label-width="formLabelWidth"
          prop="name"
        >
          <el-input
            v-model="addForm.name"
            placeholder="请输入阶梯价格名称"
            style="width: 54%"
            maxlength="10"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-radio-group v-model="addForm.configType">
            <el-radio-button :label="1">按起订量配置</el-radio-button>
            <el-radio-button :label="2">按单价配置</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <div v-if="addForm.configType == 1">
          <div
            class="dynami"
            v-for="(item, index) in addForm.ladderPriceConfigByMoq"
            :key="index"
          >
            <el-row>
              <el-col
                :span="1"
                v-if="
                  index !== addForm.ladderPriceConfigByMoq.length - 1 ||
                  index == 1
                "
              >
                <div class="bg"></div
              ></el-col>
              <el-col
                :span="1"
                v-if="
                  index == addForm.ladderPriceConfigByMoq.length - 1 &&
                  index != 1
                "
              >
                <img
                  src="@/assets/images/del.png"
                  class="del-pic"
                  @click="getDel(item, index)"
                />
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="起订量："
                  label-width="70px"
                  :prop="'ladderPriceConfigByMoq.' + index + '.mq'"
                  :rules="{
                    required: true,
                    message: '请输入起订量',
                    trigger: 'blur',
                  }"
                >
                  <el-input
                    @keyup.native="item.mq = item.mq.replace(/[^\d]/g, '')"
                    v-model="item.mq"
                    style="width: 63.5%"
                    @blur="blurMq"
                  ></el-input>
                  <p v-if="isError[index]" class="num-error">
                    输入错误，请重新输入
                  </p>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item
                  label="价格降比："
                  label-width="85px"
                  :prop="'ladderPriceConfigByMoq.' + index + '.lower'"
                  :rules="{
                    required: true,
                    message: '请输入价格降比',
                    trigger: 'blur',
                  }"
                >
                  <el-input
                    @keyup.native="
                      item.lower = item.lower
                        .replace(/[^\d.]/g, '')
                        .replace(/^\./g, '')
                        .replace(/\.{2,}/g, '.')
                        .replace(/^(\-)*(\d+)\.(\d).*$/, '$1$2.$3')
                    "
                    v-model="item.lower"
                    @blur="blurLower"
                    style="width: 100%"
                  ></el-input>
                  <p v-if="isLowerError[index]" class="num-error">
                    输入错误，请重新输入
                  </p>
                </el-form-item>
              </el-col>
              <el-col :span="1" class="percent">%</el-col>
            </el-row>
          </div>
          <p class="error-tit" v-if="isShow">
            抱歉！不能再添加了，阶梯价格最多可配置5级。
          </p>
          <div class="add-btn">
            <img
              class="add-icon"
              src="@/assets/images/add.png"
              alt=""
              @click="getAddPrice"
              v-if="!isShow"
            />
            <img
              v-if="isShow"
              class="add-icon"
              src="@/assets/images/add-disable.png"
              alt=""
            />
            <span>添加</span>
          </div>
        </div>
        <div v-if="addForm.configType == 2">
          <el-radio v-model="addForm.currency" :label="1">人民币</el-radio>
          <el-radio v-model="addForm.currency" :label="2">美元</el-radio>
          <div>
            <div
              class="price-content"
              v-for="(val, key) in addForm.ladderPriceConfigByAmount"
              :key="key"
            >
              <el-row>
                <el-col
                  :span="1"
                  v-if="
                    key !== addForm.ladderPriceConfigByAmount.length - 1 ||
                    key == 1
                  "
                >
                  <div class="bg"></div
                ></el-col>
                <el-col :span="1">
                  <img
                    src="@/assets/images/del.png"
                    class="delstep-pic"
                    @click="getStepDel(val, key)"
                    v-if="
                      key == addForm.ladderPriceConfigByAmount.length - 1 &&
                      key != 1
                    "
                  />
                </el-col>
                <el-col :span="8">
                  <div class="price-item">
                    <el-input
                      v-model="val.minPrice"
                      v-if="
                        key != 0 &&
                        key != addForm.ladderPriceConfigByAmount.length - 1
                      "
                      :disabled="isminStepDisabled[key]"
                      @blur="blurMinprice"
                    ></el-input>
                    <p>
                      <span
                        v-if="
                          key != 0 &&
                          key != addForm.ladderPriceConfigByAmount.length - 1
                        "
                        >></span
                      >单价
                      <span
                        v-if="
                          key != addForm.ladderPriceConfigByAmount.length - 1
                        "
                        >≤</span
                      ><span
                        v-if="
                          key == addForm.ladderPriceConfigByAmount.length - 1
                        "
                        >></span
                      >
                    </p>
                    <el-input
                      v-if="key != addForm.ladderPriceConfigByAmount.length - 1"
                      v-model="val.maxPrice"
                      @blur="blurMaxprice"
                      @change="changemaxVal(val.maxPrice, key)"
                      :disabled="ismaxStepDisabled[key]"
                    ></el-input>
                    <el-input
                      v-if="key == addForm.ladderPriceConfigByAmount.length - 1"
                      v-model="val.minPrice"
                      @blur="blurMinprice"
                      :disabled="isminStepDisabled[key]"
                    ></el-input>
                  </div>
                </el-col>
                <el-col :span="15">
                  <div
                    class="dynami"
                    v-for="(item, index) in val.ladderPriceConfig"
                    :key="index"
                  >
                    <el-row>
                      <el-col
                        :span="2"
                        v-if="
                          index !== val.ladderPriceConfig.length - 1 ||
                          index == 1
                        "
                      >
                        <div class="bg"></div
                      ></el-col>
                      <el-col
                        :span="2"
                        v-if="
                          index == val.ladderPriceConfig.length - 1 &&
                          index != 1
                        "
                      >
                        <img
                          src="@/assets/images/del.png"
                          class="del-pic"
                          @click="getPriceDel(item, index, key)"
                        />
                      </el-col>
                      <el-col :span="11">
                        <el-form-item
                          label="起订量："
                          label-width="70px"
                          :prop="
                            'ladderPriceConfigByAmount[' +
                            key +
                            '].ladderPriceConfig.' +
                            index +
                            '.mq'
                          "
                          :rules="{
                            required: true,
                            message: '请输入起订量',
                            trigger: 'blur',
                          }"
                        >
                          <el-input
                            @keyup.native="
                              item.mq = item.mq.replace(/[^\d]/g, '')
                            "
                            v-model="item.mq"
                            style="width: 81.3%"
                            @change="blurStepMq(item.mq, index, key)"
                          ></el-input>
                          <p v-if="isPriceError[key][index]" class="num-error">
                            输入错误，请重新输入
                          </p>
                        </el-form-item>
                      </el-col>
                      <el-col :span="9">
                        <el-form-item
                          label="价格降比："
                          label-width="85px"
                          :prop="
                            'ladderPriceConfigByAmount[' +
                            key +
                            '].ladderPriceConfig.' +
                            index +
                            '.lower'
                          "
                          :rules="{
                            required: true,
                            message: '请输入价格降比',
                            trigger: 'blur',
                          }"
                        >
                          <el-input
                            @keyup.native="
                              item.lower = item.lower
                                .replace(/[^\d.]/g, '')
                                .replace(/^\./g, '')
                                .replace(/\.{2,}/g, '.')
                                .replace(/^(\-)*(\d+)\.(\d).*$/, '$1$2.$3')
                            "
                            v-model="item.lower"
                            @change="blurStepLower(item.lower, index, key)"
                            style="width: 100%"
                          ></el-input>
                          <p
                            v-if="isPriceLowerError[key][index]"
                            class="num-error"
                          >
                            输入错误，请重新输入
                          </p>
                        </el-form-item>
                      </el-col>
                      <el-col :span="1" class="percent">%</el-col>
                    </el-row>
                  </div>
                  <p
                    class="add-tit"
                    v-if="!isAddShow[key]"
                    @click="getAddUnitprice(key)"
                  >
                    +添加一列
                  </p>
                </el-col>
              </el-row>
            </div>
          </div>
          <div class="add-btn">
            <img
              v-if="!isAddStepShow"
              class="add-icon"
              src="@/assets/images/add.png"
              alt=""
              @click="getAddStepPrice"
            />
            <img
              class="add-icon"
              src="@/assets/images/add-disable.png"
              alt=""
              v-if="isAddStepShow"
            />
            <span>添加</span>
          </div>
        </div>
      </el-form>
      <div class="demo-drawer__footer">
        <p class="footer-tips">起订量/单价填写由低到高</p>
        <el-button
          type="primary"
          @click="getaddSubmit('addForm', type)"
          class="btn"
          >确认</el-button
        >
        <el-button @click="concelDrawer"  class="btn resletBtn">取消</el-button>
      </div>
    </div>
  </el-drawer>
</template>
<script>
import { addPrice, priceInfo, editPrice } from "@/api/stock";
export default {
  data() {
    return {
      drawer: false,
      direction: "rtl",
      tabPosition: "1",
      title: "",
      addForm: {
        name: "",
        configType: 1,
        currency: 1,
        ladderPriceConfigByMoq: [
          {
            lower: "",
            mq: "",
          },
          {
            lower: "",
            mq: "",
          },
        ],
        ladderPriceConfigByAmount: [
          {
            ladderPriceConfig: [
              {
                lower: "",
                mq: "",
              },
              {
                lower: "",
                mq: "",
              },
            ],
            maxPrice: "",
            minPrice: "",
          },
          {
            ladderPriceConfig: [
              {
                lower: "",
                mq: "",
              },
              {
                lower: "",
                mq: "",
              },
            ],
            maxPrice: "",
            minPrice: "",
          },
        ],
      },
      rules: {
        name: [
          { required: true, message: "请输入阶梯价格名称", trigger: "blur" },
        ],
      },
      isShow: false,
      isAddShow: [],
      isAddStepShow: false,
      isminStepDisabled: [false, false, false, false, false, false],
      ismaxStepDisabled: [false, false, false, false, false, false],
      isError: [],
      isLowerError: [],
      isPriceError: [[]],
      isPriceLowerError: [[]],
      priceId: "",
      type: "",
      typeid:'',
      formLabelWidth: "93px",
    };
  },
  methods: {
    open(data,typeid) {
      console.log(data,typeid,'data,typeiddata,typeid');
      this.type = data;
      if (data != undefined) {
        this.title = "阶梯价格编辑";
        priceInfo(data).then((res) => {
          if (res.success) {
            this.addForm = res.result;
            if (this.addForm.ladderPriceConfigByMoq == null) {
              this.addForm.ladderPriceConfigByMoq = [];
              this.addForm.ladderPriceConfigByMoq.push(
                {
                  lower: "",
                  mq: "",
                },
                {
                  lower: "",
                  mq: "",
                }
              );
              // 编辑的时候添加isPriceError isPriceLowerError
              this.addForm.ladderPriceConfigByAmount.map((item, key) => {
                this.isPriceError[key] = [];
                this.isPriceLowerError[key] = [];
                this.addForm.ladderPriceConfigByAmount[
                  key
                ].ladderPriceConfig.map((val, i) => {
                  this.$set(this.isPriceError[key], i, false);
                  this.$set(this.isPriceLowerError[key], i, false);
                });
              });
              this.addForm.ladderPriceConfigByAmount.map((item, index) => {
                this.isminStepDisabled[index + 1] = true;
              });
              this.isminStepDisabled[
                this.addForm.ladderPriceConfigByAmount.length
              ] = false;
            }
            if (this.addForm.ladderPriceConfigByAmount == null) {
              this.addForm.ladderPriceConfigByAmount = [];
              this.addForm.ladderPriceConfigByAmount.push(
                {
                  ladderPriceConfig: [
                    {
                      lower: "",
                      mq: "",
                    },
                    {
                      lower: "",
                      mq: "",
                    },
                  ],
                  maxPrice: "",
                  minPrice: "",
                },
                {
                  ladderPriceConfig: [
                    {
                      lower: "",
                      mq: "",
                    },
                    {
                      lower: "",
                      mq: "",
                    },
                  ],
                  maxPrice: "",
                  minPrice: "",
                }
              );
              if (this.addForm.ladderPriceConfigByMoq.length == 5) {
                this.isShow = true;
              }
            }
            console.log(this.addForm, "this.addFormthis.addForm");
          }
        });
      } else {
        this.title = "阶梯价格新增";
      }
      this.drawer = true;
    },
    concelDrawer() {
      this.handleClose();
    },
    handleClose() {
      this.$refs["addForm"].resetFields();
      this.addForm.name = "";
      this.addForm.configType = 1;
      this.addForm.currency = 1;
      this.addForm.ladderPriceConfigByMoq = [
        {
          lower: "",
          mq: "",
        },
        {
          lower: "",
          mq: "",
        },
      ];
      this.addForm.ladderPriceConfigByAmount = [
        {
          ladderPriceConfig: [
            {
              lower: "",
              mq: "",
            },
            {
              lower: "",
              mq: "",
            },
          ],
          maxPrice: "",
          minPrice: "",
        },
        {
          ladderPriceConfig: [
            {
              lower: "",
              mq: "",
            },
            {
              lower: "",
              mq: "",
            },
          ],
          maxPrice: "",
          minPrice: "",
        },
      ];
      this.isError = [];
      console.log(this.addForm, "addFormaddForm");
      this.drawer = false;
      this.isShow = false;
      this.isAddStepShow = false;
      this.isminStepDisabled = [false, false, false, false, false, false];
      this.ismaxStepDisabled = [false, false, false, false, false, false];
      this.isLowerError = [];
      this.setError();
    },
    blurMq(e) {
      this.addForm.ladderPriceConfigByMoq.map((item, index) => {
        this.$set(this.isError, index, false);
        if (item.mq == e.target.value) {
          if (index > 0) {
            if (
              item.mq != "" &&
              this.addForm.ladderPriceConfigByMoq[index - 1].mq != "" &&
              parseFloat(item.mq) <=
                parseFloat(this.addForm.ladderPriceConfigByMoq[index - 1].mq)
            ) {
              this.isError[index] = true;
            }
          }
        }
      });
    },
    blurLower(e) {
      this.addForm.ladderPriceConfigByMoq.map((item, index) => {
        this.$set(this.isLowerError, index, false);
        if (item.lower == e.target.value) {
          if (index > 0) {
            if (
              item.lower != "" &&
              this.addForm.ladderPriceConfigByMoq[index - 1].lower != "" &&
              parseFloat(item.lower) <=
                parseFloat(this.addForm.ladderPriceConfigByMoq[index - 1].lower)
            ) {
              this.isLowerError[index] = true;
            } else {
              this.isLowerError[index] = false;
            }
            console.log(this.isLowerError);
          }
        }
      });
    },
    getaddSubmit(formName, type) {
      console.log(formName, type, "formName,typeformName,type");
      this.$refs[formName].validate((valid) => {
        console.log(formName, this.addForm, "this.addFormthis.addForm");
        if (valid) {
          let arr = false;
          if (this.addForm.configType == 1) {
            for (
              let index = 0;
              index < this.addForm.ladderPriceConfigByMoq.length;
              index++
            ) {
              for (
                let index2 = 1;
                index2 < this.addForm.ladderPriceConfigByMoq.length;
                index2++
              ) {
                if (
                  index2 > index &&
                  (Number(this.addForm.ladderPriceConfigByMoq[index2].mq) <=
                    Number(this.addForm.ladderPriceConfigByMoq[index].mq) ||
                    Number(this.addForm.ladderPriceConfigByMoq[index2].lower) <=
                      Number(this.addForm.ladderPriceConfigByMoq[index].lower))
                ) {
                  arr = true;
                }
              }
            }
          } else {
            console.log(this.addForm.ladderPriceConfigByAmount, "this.addForm");
            this.addForm.ladderPriceConfigByAmount.map((item, key) => {
              console.log(item, key, "33333333");
              for (
                let index = 0;
                index <
                this.addForm.ladderPriceConfigByAmount[key].ladderPriceConfig
                  .length;
                index++
              ) {
                for (
                  let index2 = 1;
                  index2 <
                  this.addForm.ladderPriceConfigByAmount[key].ladderPriceConfig
                    .length;
                  index2++
                ) {
                  if (
                    index2 > index &&
                    (Number(
                      this.addForm.ladderPriceConfigByAmount[key]
                        .ladderPriceConfig[index2].mq
                    ) <=
                      Number(
                        this.addForm.ladderPriceConfigByAmount[key]
                          .ladderPriceConfig[index].mq
                      ) ||
                      Number(
                        this.addForm.ladderPriceConfigByAmount[key]
                          .ladderPriceConfig[index2].lower
                      ) <=
                        Number(
                          this.addForm.ladderPriceConfigByAmount[key]
                            .ladderPriceConfig[index].lower
                        ))
                  ) {
                    arr = true;
                  }
                }
              }
            });
          }

          if (arr) {
            this.$message.error("请按照从低到高的规则输入数据");
            return false;
          }
          if (type == undefined) {
            addPrice(this.addForm).then((res) => {
              if (res.success) {
                this.$message.success(res.message);
                this.$emit("getList", this.addForm.configType);
                this.handleClose();
              } else {
                this.$message.error(res.message);
              }
            });
          } else {
            editPrice(this.addForm).then((res) => {
              if (res.success) {
                this.$message.success(res.message);
                this.$emit("getList", this.addForm.configType);
                this.handleClose();
              } else {
                this.$message.error(res.message);
              }
            });
          }
        } else {
          return false;
        }
      });
    },
    getAddPrice() {
      if (this.addForm.ladderPriceConfigByMoq.length <= 4) {
        this.isShow = false;
        this.addForm.ladderPriceConfigByMoq.push({
          lower: "",
          mq: "",
        });
      }
      if (this.addForm.ladderPriceConfigByMoq.length == 5) {
        this.isShow = true;
      }
    },
    // 新增按单价
    getAddUnitprice(key) {
      this.$set(this.isAddShow, key, false);
      this.addForm.ladderPriceConfigByAmount.map((item, index) => {
        console.log(item, index, key);
        if (index == key) {
          if (item.ladderPriceConfig.length <= 4) {
            item.ladderPriceConfig.push({
              lower: "",
              mq: "",
            });
          }
          if (item.ladderPriceConfig.length == 5) {
            this.isAddShow[key] = true;
          }
        }
      });
    },
    // 新增按单价配置阶级
    getAddStepPrice() {
      if (this.addForm.ladderPriceConfigByAmount.length <= 4) {
        this.addForm.ladderPriceConfigByAmount.push({
          ladderPriceConfig: [
            {
              lower: "",
              mq: "",
            },
            {
              lower: "",
              mq: "",
            },
          ],
          maxPrice: "",
          minPrice: "",
        });
      }
      let arrLength = this.addForm.ladderPriceConfigByAmount.length - 1;
      this.isPriceError[arrLength] = [];
      this.isPriceLowerError[arrLength] = [];
      if (this.addForm.ladderPriceConfigByAmount.length == 5) {
        this.isAddStepShow = true;
      }
      // console.log(this.addForm.ladderPriceConfigByAmount,'this.addForm.ladderPriceConfigByAmount11');
    },
    getDel(item, index) {
      this.isShow = false;
      this.addForm.ladderPriceConfigByMoq.splice(index, 1);
    },
    getPriceDel(item, index, key) {
      this.isAddShow[key] = false;
      this.addForm.ladderPriceConfigByAmount[key].ladderPriceConfig.splice(
        index,
        1
      );
    },
    //单价输入最大值数据 失焦
    blurMaxprice(e) {
      this.addForm.ladderPriceConfigByAmount.map((item, index) => {
        if (item.maxPrice == e.target.value) {
          console.log(e, index, "444444444");
          if (e.target.value != "") {
            this.isminStepDisabled[index + 1] = true;
            this.addForm.ladderPriceConfigByAmount[index + 1].minPrice =
              e.target.value;
            console.log(this.isminStepDisabled, "this.isStepDisabled");
          }
        }
      });
    },
    changemaxVal(val, key) {
      if (val == "") {
        this.addForm.ladderPriceConfigByAmount[key + 1].minPrice = val;
        this.isminStepDisabled[key + 1] = false;
      }
    },
    //输入最小值数据 失焦
    blurMinprice(e) {
      this.addForm.ladderPriceConfigByAmount.map((item, index) => {
        if (item.minPrice == e.target.value) {
          if (e.target.value != "") {
            this.isminStepDisabled[index] = true;
            this.addForm.ladderPriceConfigByAmount[index - 1].maxPrice =
              e.target.value;
          }
        }
        console.log(this.ismaxStepDisabled, "this.ismaxStepDisabled");
      });
    },
    getStepDel(item, index) {
      console.log(item,'itemitemitemitem');
      console.log(this.addForm.ladderPriceConfigByAmount,'this.addForm.ladderPriceConfigByAmount');
      this.addForm.ladderPriceConfigByAmount.splice(index, 1);
      this.addForm.ladderPriceConfigByAmount[this.addForm.ladderPriceConfigByAmount.length -1].maxPrice = '';
      this.isAddStepShow = false;
    },
    blurStepMq(val, index, key) {
      this.$set(this.isPriceError[key], index, false);
      this.addForm.ladderPriceConfigByAmount[key].ladderPriceConfig.map(
        (item, i) => {
          if (item.mq == val) {
            if (i > 0) {
              if (
                item.mq != "" &&
                this.addForm.ladderPriceConfigByAmount[key].ladderPriceConfig[
                  i - 1
                ].mq != "" &&
                parseFloat(item.mq) <=
                  parseFloat(
                    this.addForm.ladderPriceConfigByAmount[key]
                      .ladderPriceConfig[i - 1].mq
                  )
              ) {
                this.$forceUpdate();
                this.isPriceError[key][i] = true;
              } else {
                this.$forceUpdate();
                this.isPriceError[key][i] = false;
              }
            }
          }
        }
      );
    },
    blurStepLower(val, index, key) {
      console.log(val, index, key, "blurStepLower");
      this.$set(this.isPriceLowerError[key], index, false);
      this.addForm.ladderPriceConfigByAmount[key].ladderPriceConfig.map(
        (item, i) => {
          if (item.lower == val) {
            if (i > 0) {
              if (
                item.lower != "" &&
                this.addForm.ladderPriceConfigByAmount[key].ladderPriceConfig[
                  i - 1
                ].lower != "" &&
                parseFloat(item.lower) <=
                  parseFloat(
                    this.addForm.ladderPriceConfigByAmount[key]
                      .ladderPriceConfig[i - 1].lower
                  )
              ) {
                this.$forceUpdate();
                this.isPriceLowerError[key][i] = true;
              } else {
                this.$forceUpdate();
                this.isPriceLowerError[key][i] = false;
              }
            }
          }
        }
      );
    },
    setError() {
      this.addForm.ladderPriceConfigByAmount.map((item, key) => {
        this.isPriceError[key] = [];
        this.isPriceLowerError[key] = [];
        this.addForm.ladderPriceConfigByAmount[key].ladderPriceConfig.map(
          (val, i) => {
            this.$set(this.isPriceError[key], i, false);
            this.$set(this.isPriceLowerError[key], i, false);
          }
        );
      });
    },
  },
  created() {
    this.setError();
  },
};
</script>
<style scoped lang="scss">
.drawer {
  ::v-deep .el-drawer__header {
    font-size: 16px;
    font-weight: 600;
    color: #333333;
    line-height: 24px;
    border-bottom: 1px solid #dddddd;
    padding: 32px 0 15px;
    margin: 0 32px;
  }
  ::v-deep .el-drawer__body {
    padding: 8px 34px 0;
    .content {
      display: flex;
      flex-direction: column;
      padding-bottom: 24px;
      height: 100%;
      .bg {
        width: 100%;
        height: 32px;
        display: block;
      }
      .addform {
        flex: 1;
      }
      .el-form-item__label {
        font-size: 14px;
        font-weight: 400;
        color: #1a2035;
        line-height: 32px;
        padding: 0;
      }
      .el-form-item--small.el-form-item {
        margin-bottom: 20px !important;
      }
      .percent {
        line-height: 32px;
        text-align: center;
      }
      .del-pic {
        width: 16px;
        height: 16px;
        display: block;
        margin: 9px auto 0;
      }
      .delstep-pic {
        width: 16px;
        height: 16px;
        display: block;
        margin: 9px auto 0;
      }
      .add-btn {
        margin: 40px 0 0 7px;
        display: flex;
        align-items: center;
        height: 20px;
        font-size: 14px;
        font-weight: 400;
        color: #777777;
        line-height: 20px;
        .add-icon {
          width: 16px;
          height: 16px;
          display: block;
          margin-right: 10px;
        }
      }
      .num-error {
        color: #ff4949;
        font-size: 12px;
        line-height: 18px;
        margin: 0;
      }
      .add-tit {
        font-size: 14px;
        font-weight: 400;
        color: #2348e8;
        line-height: 20px;
        text-align: center;
        width: 76px;
        margin: auto;
        cursor: pointer;
      }
      .error-tit {
        font-size: 12px;
        font-weight: 400;
        color: #e60012;
        line-height: 17px;
        margin-left: 129;
      }
      .price-content {
        margin-top: 20px;
        font-size: 14px;
        font-weight: 400;
        color: #777777;
        line-height: 20px;
        &:first-child {
          .price-item {
            justify-content: flex-end;
          }
        }
        &:last-child {
          .price-item {
            justify-content: flex-end;
          }
        }
        .price-item {
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          .el-input {
            width: 37.3%;
          }
          p {
            line-height: 5px;
            text-align: center;
            display: block;
            &:first-child {
              margin-right: 20px;
            }
          }
        }
      }
      .demo-drawer__footer {
        text-align: center;
      }
      .footer-tips {
        font-size: 14px;
        font-weight: 400;
        color: #777777;
        line-height: 20px;
        .btn {
          font-size: 12px;
          font-weight: 400;
          color: #ffffff;
          line-height: 17px;
          padding: 5px 22px;
        }
      }
    }
  }
}
</style>
